<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="logo">
        <span class="iconify" data-icon="mdi:medal" style="color: white;"></span>
        运动会管理系统
      </div>
      <div class="flex-grow"></div>
      <div class="flex items-center gap-6">
        <div class="flex items-center gap-2">
          <img id="img-head" src="img/jstu1.webp">
          <span class="text-white text-sm">{{ currentUser?.realName || '管理员' }}</span>
        </div>
        <div class="flex items-center gap-2">
          <a href="javascript:void(0)" class="denglu" @click="handleLogout">退出登录</a>
        </div>
      </div>
    </header>

    <!-- 左侧导航栏 -->
    <nav class="sidebar">
      <div class="menu-item" :class="{ active: $route.path === '/admin' }">
        <span class="iconify" data-icon="mdi:view-dashboard"></span>
        <a @click="$router.push('/admin')">系统管理</a>
      </div>
      <div class="menu-item" :class="{ active: $route.path === '/admin/users' }">
        <span class="iconify" data-icon="mdi:account-group"></span>
        <a @click="$router.push('/admin/users')">用户管理</a>
      </div>
      <div class="menu-item active">
        <span class="iconify" data-icon="mdi:volunteer-activism"></span>
        志愿者管理
      </div>
      <div class="menu-item" :class="{ active: $route.path === '/admin/projects' }">
        <span class="iconify" data-icon="mdi:clipboard-list"></span>
        <a @click="$router.push('/admin/projects')">项目管理</a>
      </div>
      <div class="menu-item" :class="{ active: $route.path === '/admin/schedule' }">
        <span class="iconify" data-icon="mdi:calendar-clock"></span>
        <a @click="$router.push('/admin/schedule')">赛程管理</a>
      </div>
      <div class="menu-item" :class="{ active: $route.path === '/admin/judges' }">
        <span class="iconify" data-icon="mdi:whistle"></span>
        <a @click="$router.push('/admin/judges')">裁判分配</a>
      </div>
    </nav>

    <!-- 主要内容 -->
    <main class="content">
      <!-- 面包屑导航 -->
      <div class="breadcrumb-container">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/admin' }">系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>志愿者管理</el-breadcrumb-item>
          <el-breadcrumb-item>任务分配</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 统计信息卡片 -->
      <div class="statistics-cards">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon total-volunteers">
                  <span class="iconify" data-icon="mdi:account-group"></span>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ statistics.totalVolunteers || 0 }}</div>
                  <div class="stat-label">总志愿者数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon active-tasks">
                  <span class="iconify" data-icon="mdi:playlist-check"></span>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ statistics.activeTasks || 0 }}</div>
                  <div class="stat-label">进行中任务</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon pending-tasks">
                  <span class="iconify" data-icon="mdi:clock-time-eight"></span>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ statistics.pendingTasks || 0 }}</div>
                  <div class="stat-label">待分配任务</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon completed-tasks">
                  <span class="iconify" data-icon="mdi:check-circle"></span>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ statistics.completedTasks || 0 }}</div>
                  <div class="stat-label">已完成任务</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 搜索筛选区域 -->
      <div class="search-bar">
        <el-form :inline="true" :model="searchForm" size="small">
          <el-form-item label="志愿者">
            <el-input
              v-model="searchForm.keyword"
              placeholder="搜索志愿者姓名/学号"
              clearable
              style="width: 200px"
              @input="handleSearch">
              <template #prefix>
                <i class="el-icon-search"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="技能筛选">
            <el-select
              v-model="searchForm.skillFilter"
              placeholder="请选择技能"
              clearable
              style="width: 150px"
              @change="handleSkillFilter">
              <el-option
                v-for="skill in skillOptions"
                :key="skill.value"
                :label="skill.label"
                :value="skill.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工作负载">
            <el-select
              v-model="searchForm.workloadFilter"
              placeholder="请选择负载"
              clearable
              style="width: 130px"
              @change="handleWorkloadFilter">
              <el-option label="空闲" value="idle"></el-option>
              <el-option label="较轻" value="light"></el-option>
              <el-option label="适中" value="moderate"></el-option>
              <el-option label="较重" value="heavy"></el-option>
              <el-option label="超负荷" value="overloaded"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" :loading="loading">
              <i class="el-icon-search"></i> 搜索
            </el-button>
            <el-button @click="handleReset">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
            <el-button type="success" @click="showBatchAssignDialog = true">
              <i class="el-icon-s-grid"></i> 批量分配
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 主要内容区 -->
      <el-row :gutter="20" class="content-row">
        <!-- 左侧：任务创建表单 -->
        <el-col :span="8" class="left-panel">
          <el-card class="task-form-card">
            <template #header>
              <div class="card-header">
                <span>创建新任务</span>
                <el-switch
                  v-model="smartRecommendEnabled"
                  active-text="智能推荐"
                  inactive-text="手动分配"
                />
              </div>
            </template>

            <el-form
              ref="taskFormRef"
              :model="taskForm"
              :rules="taskFormRules"
              label-width="100px"
              size="small"
            >
              <el-form-item label="任务名称" prop="taskName">
                <el-input v-model="taskForm.taskName" placeholder="请输入任务名称" />
              </el-form-item>

              <el-form-item label="任务类型" prop="taskType">
                <el-select v-model="taskForm.taskType" placeholder="请选择任务类型">
                  <el-option
                    v-for="type in taskTypeOptions"
                    :key="type.value"
                    :label="type.label"
                    :value="type.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="优先级" prop="priority">
                <el-select v-model="taskForm.priority" placeholder="请选择优先级">
                  <el-option label="高" value="high" />
                  <el-option label="中" value="medium" />
                  <el-option label="低" value="low" />
                </el-select>
              </el-form-item>

              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                  v-model="taskForm.startTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>

              <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                  v-model="taskForm.endTime"
                  type="datetime"
                  placeholder="选择结束时间"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>

              <el-form-item label="工作地点" prop="location">
                <el-input v-model="taskForm.location" placeholder="请输入工作地点" />
              </el-form-item>

              <el-form-item label="所需人数" prop="requiredCount">
                <el-input-number
                  v-model="taskForm.requiredCount"
                  :min="1"
                  :max="50"
                  placeholder="所需人数"
                />
              </el-form-item>

              <el-form-item label="技能要求" prop="requiredSkills">
                <el-select
                  v-model="taskForm.requiredSkills"
                  multiple
                  placeholder="选择所需技能"
                >
                  <el-option
                    v-for="skill in skillOptions"
                    :key="skill.value"
                    :label="skill.label"
                    :value="skill.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="任务描述" prop="description">
                <el-input
                  v-model="taskForm.description"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入任务描述"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="createTask" :loading="creatingTask">
                  创建任务
                </el-button>
                <el-button @click="resetTaskForm">重置</el-button>
              </el-form-item>
            </el-form>

            <!-- 智能推荐区域 -->
            <div v-if="smartRecommendEnabled && recommendedVolunteers.length > 0" class="recommendation-panel">
              <h4>推荐志愿者</h4>
              <el-table
                :data="recommendedVolunteers"
                size="small"
                @selection-change="handleRecommendationSelection"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="姓名" width="80" />
                <el-table-column prop="studentId" label="学号" width="120" />
                <el-table-column prop="matchScore" label="匹配度" width="80">
                  <template #default="{ row }">
                    <el-tag :type="getMatchScoreType(row.matchScore)">
                      {{ row.matchScore }}%
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="workload" label="工作负载" width="80">
                  <template #default="{ row }">
                    <el-progress
                      :percentage="row.workloadPercentage"
                      :status="getWorkloadStatus(row.workloadPercentage)"
                      :show-text="false"
                      :stroke-width="6"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧：志愿者列表 -->
        <el-col :span="16" class="right-panel">
          <el-card class="volunteer-list-card">
            <template #header>
              <div class="card-header">
                <span>可用志愿者列表</span>
                <div class="header-actions">
                  <el-button-group>
                    <el-button
                      :type="viewMode === 'list' ? 'primary' : ''"
                      size="small"
                      @click="viewMode = 'list'"
                    >
                      列表视图
                    </el-button>
                    <el-button
                      :type="viewMode === 'card' ? 'primary' : ''"
                      size="small"
                      @click="viewMode = 'card'"
                    >
                      卡片视图
                    </el-button>
                  </el-button-group>
                  <el-button size="small" @click="refreshVolunteerList">
                    刷新
                  </el-button>
                </div>
              </div>
            </template>

            <!-- 冲突提示 -->
            <el-alert
              v-if="timeConflicts.length > 0"
              title="时间冲突警告"
              type="warning"
              :description="`检测到 ${timeConflicts.length} 个时间冲突，请检查任务安排`"
              show-icon
              closable
              class="conflict-alert"
            />

            <!-- 列表视图 -->
            <div v-if="viewMode === 'list'" class="volunteer-list-view">
              <el-table
                ref="volunteerTableRef"
                :data="availableVolunteers"
                row-key="id"
                @selection-change="handleVolunteerSelection"
                @row-click="handleVolunteerClick"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="姓名" width="80" />
                <el-table-column prop="studentId" label="学号" width="120" />
                <el-table-column prop="department" label="院系" width="120" />
                <el-table-column prop="skills" label="技能" width="150">
                  <template #default="{ row }">
                    <el-tag
                      v-for="skill in row.skills"
                      :key="skill"
                      size="small"
                      class="skill-tag"
                    >
                      {{ skill }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="currentTasks" label="当前任务" width="80" />
                <el-table-column prop="workload" label="工作负载" width="120">
                  <template #default="{ row }">
                    <div class="workload-display">
                      <el-progress
                        :percentage="row.workloadPercentage"
                        :status="getWorkloadStatus(row.workloadPercentage)"
                        :show-text="false"
                        :stroke-width="6"
                      />
                      <span class="workload-text">{{ row.workloadPercentage }}%</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="availableTime" label="可用时间" width="150">
                  <template #default="{ row }">
                    <div class="time-slots">
                      <el-tag
                        v-for="slot in row.availableTimeSlots"
                        :key="slot"
                        size="mini"
                        type="success"
                      >
                        {{ slot }}
                      </el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                  <template #default="{ row }">
                    <el-button
                      type="primary"
                      size="mini"
                      @click.stop="assignTaskToVolunteer(row)"
                      :disabled="!canAssignTask(row)"
                    >
                      分配任务
                    </el-button>
                    <el-button
                      type="info"
                      size="mini"
                      @click.stop="showVolunteerDetail(row)"
                    >
                      详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页 -->
              <el-pagination
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handlePageSizeChange"
                @current-change="handleCurrentPageChange"
                class="pagination"
              />
            </div>

            <!-- 卡片视图 -->
            <div v-else class="volunteer-card-view">
              <el-row :gutter="20">
                <el-col
                  v-for="volunteer in availableVolunteers"
                  :key="volunteer.id"
                  :span="6"
                  class="volunteer-card-col"
                >
                  <el-card
                    class="volunteer-card"
                    :class="{ selected: selectedVolunteers.includes(volunteer) }"
                    @click="toggleVolunteerSelection(volunteer)"
                    draggable="true"
                    @dragstart="handleDragStart($event, volunteer)"
                    @dragend="handleDragEnd"
                  >
                    <div class="volunteer-card-header">
                      <el-avatar :size="50" :src="volunteer.avatar">
                        {{ volunteer.name.charAt(0) }}
                      </el-avatar>
                      <div class="volunteer-info">
                        <h4>{{ volunteer.name }}</h4>
                        <p>{{ volunteer.studentId }}</p>
                      </div>
                    </div>
                    <div class="volunteer-card-body">
                      <div class="info-item">
                        <span class="label">院系：</span>
                        <span>{{ volunteer.department }}</span>
                      </div>
                      <div class="info-item">
                        <span class="label">当前任务：</span>
                        <span>{{ volunteer.currentTasks }}</span>
                      </div>
                      <div class="info-item">
                        <span class="label">工作负载：</span>
                        <el-progress
                          :percentage="volunteer.workloadPercentage"
                          :status="getWorkloadStatus(volunteer.workloadPercentage)"
                          :stroke-width="6"
                        />
                      </div>
                      <div class="skills-container">
                        <el-tag
                          v-for="skill in volunteer.skills"
                          :key="skill"
                          size="mini"
                          class="skill-tag"
                        >
                          {{ skill }}
                        </el-tag>
                      </div>
                    </div>
                    <div class="volunteer-card-footer">
                      <el-button
                        type="primary"
                        size="mini"
                        @click.stop="assignTaskToVolunteer(volunteer)"
                        :disabled="!canAssignTask(volunteer)"
                      >
                        分配任务
                      </el-button>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 底部：任务列表 -->
      <el-row class="task-list-section">
        <el-col :span="24">
          <el-card class="task-list-card">
            <template #header>
              <div class="card-header">
                <span>任务列表</span>
                <div class="header-actions">
                  <el-select
                    v-model="taskFilter.status"
                    placeholder="状态筛选"
                    clearable
                    @change="filterTasks"
                  >
                    <el-option label="待分配" value="pending" />
                    <el-option label="进行中" value="in_progress" />
                    <el-option label="已完成" value="completed" />
                    <el-option label="已取消" value="cancelled" />
                  </el-select>
                  <el-select
                    v-model="taskFilter.priority"
                    placeholder="优先级筛选"
                    clearable
                    @change="filterTasks"
                  >
                    <el-option label="高" value="high" />
                    <el-option label="中" value="medium" />
                    <el-option label="低" value="low" />
                  </el-select>
                </div>
              </div>
            </template>

            <el-table :data="taskList" @row-click="showTaskDetail">
              <el-table-column prop="taskName" label="任务名称" width="150" />
              <el-table-column prop="taskType" label="任务类型" width="120" />
              <el-table-column prop="priority" label="优先级" width="80">
                <template #default="{ row }">
                  <el-tag :type="getPriorityType(row.priority)">
                    {{ getPriorityText(row.priority) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag :type="getStatusType(row.status)">
                    {{ getStatusText(row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="assignedCount" label="已分配" width="80" />
              <el-table-column prop="requiredCount" label="需求人数" width="80" />
              <el-table-column prop="startTime" label="开始时间" width="150" />
              <el-table-column prop="endTime" label="结束时间" width="150" />
              <el-table-column prop="location" label="工作地点" width="120" />
              <el-table-column label="操作" width="200">
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    size="mini"
                    @click.stop="editTask(row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    type="success"
                    size="mini"
                    @click.stop="assignMoreVolunteers(row)"
                    :disabled="row.status === 'completed'"
                  >
                    添加人员
                  </el-button>
                  <el-button
                    type="danger"
                    size="mini"
                    @click.stop="deleteTask(row.id)"
                    :disabled="row.status === 'in_progress'"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 任务分页 -->
            <el-pagination
              v-model:current-page="taskPagination.currentPage"
              v-model:page-size="taskPagination.pageSize"
              :page-sizes="[10, 20, 50]"
              :total="taskPagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleTaskPageSizeChange"
              @current-change="handleTaskCurrentPageChange"
              class="pagination"
            />
          </el-card>
        </el-col>
      </el-row>
    <!-- 志愿者详情对话框 -->
    <el-dialog
      v-model="volunteerDetailVisible"
      title="志愿者详情"
      width="60%"
    >
      <div v-if="selectedVolunteerDetail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">
            {{ selectedVolunteerDetail.name }}
          </el-descriptions-item>
          <el-descriptions-item label="学号">
            {{ selectedVolunteerDetail.studentId }}
          </el-descriptions-item>
          <el-descriptions-item label="院系">
            {{ selectedVolunteerDetail.department }}
          </el-descriptions-item>
          <el-descriptions-item label="专业">
            {{ selectedVolunteerDetail.major }}
          </el-descriptions-item>
          <el-descriptions-item label="联系电话">
            {{ selectedVolunteerDetail.phone }}
          </el-descriptions-item>
          <el-descriptions-item label="邮箱">
            {{ selectedVolunteerDetail.email }}
          </el-descriptions-item>
          <el-descriptions-item label="技能标签" :span="2">
            <el-tag
              v-for="skill in selectedVolunteerDetail.skills"
              :key="skill"
              class="skill-tag"
            >
              {{ skill }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="服务时长">
            {{ selectedVolunteerDetail.totalServiceHours }} 小时
          </el-descriptions-item>
          <el-descriptions-item label="完成任务数">
            {{ selectedVolunteerDetail.completedTasks }} 个
          </el-descriptions-item>
          <el-descriptions-item label="当前任务" :span="2">
            <el-table :data="selectedVolunteerDetail.currentTaskList" size="small">
              <el-table-column prop="taskName" label="任务名称" />
              <el-table-column prop="startTime" label="开始时间" />
              <el-table-column prop="endTime" label="结束时间" />
              <el-table-column prop="status" label="状态" />
            </el-table>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <!-- 任务详情对话框 -->
    <el-dialog
      v-model="taskDetailVisible"
      title="任务详情"
      width="70%"
    >
      <div v-if="selectedTaskDetail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="任务名称">
            {{ selectedTaskDetail.taskName }}
          </el-descriptions-item>
          <el-descriptions-item label="任务类型">
            {{ selectedTaskDetail.taskType }}
          </el-descriptions-item>
          <el-descriptions-item label="优先级">
            <el-tag :type="getPriorityType(selectedTaskDetail.priority)">
              {{ getPriorityText(selectedTaskDetail.priority) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(selectedTaskDetail.status)">
              {{ getStatusText(selectedTaskDetail.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="开始时间">
            {{ selectedTaskDetail.startTime }}
          </el-descriptions-item>
          <el-descriptions-item label="结束时间">
            {{ selectedTaskDetail.endTime }}
          </el-descriptions-item>
          <el-descriptions-item label="工作地点">
            {{ selectedTaskDetail.location }}
          </el-descriptions-item>
          <el-descriptions-item label="需求人数">
            {{ selectedTaskDetail.requiredCount }} 人
          </el-descriptions-item>
          <el-descriptions-item label="已分配">
            {{ selectedTaskDetail.assignedCount }} 人
          </el-descriptions-item>
          <el-descriptions-item label="任务描述" :span="2">
            {{ selectedTaskDetail.description }}
          </el-descriptions-item>
          <el-descriptions-item label="已分配志愿者" :span="2">
            <el-table :data="selectedTaskDetail.assignedVolunteers" size="small">
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="studentId" label="学号" />
              <el-table-column prop="department" label="院系" />
              <el-table-column prop="assignTime" label="分配时间" />
              <el-table-column label="操作">
                <template #default="{ row }">
                  <el-button
                    type="danger"
                    size="mini"
                    @click="removeVolunteerFromTask(row.id)"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <!-- 批量分配对话框 -->
    <el-dialog
      v-model="showBatchAssignDialog"
      title="批量分配任务"
      width="50%"
    >
      <el-form :model="batchAssignForm" label-width="100px">
        <el-form-item label="选择任务">
          <el-select v-model="batchAssignForm.taskId" placeholder="请选择任务">
            <el-option
              v-for="task in pendingTasks"
              :key="task.id"
              :label="task.taskName"
              :value="task.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择志愿者">
          <el-transfer
            v-model="batchAssignForm.selectedVolunteers"
            :data="transferVolunteers"
            :titles="['可选志愿者', '已选志愿者']"
            :props="{
              key: 'id',
              label: 'name'
            }"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showBatchAssignDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmBatchAssign">确认分配</el-button>
      </template>
    </el-dialog>

    <!-- 任务编辑对话框 -->
    <el-dialog
      v-model="taskEditVisible"
      title="编辑任务"
      width="60%"
    >
      <el-form
        ref="taskEditFormRef"
        :model="taskEditForm"
        :rules="taskFormRules"
        label-width="100px"
      >
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="taskEditForm.taskName" />
        </el-form-item>
        <el-form-item label="任务类型" prop="taskType">
          <el-select v-model="taskEditForm.taskType">
            <el-option
              v-for="type in taskTypeOptions"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="taskEditForm.priority">
            <el-option label="高" value="high" />
            <el-option label="中" value="medium" />
            <el-option label="低" value="low" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="taskEditForm.startTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="taskEditForm.endTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="工作地点" prop="location">
          <el-input v-model="taskEditForm.location" />
        </el-form-item>
        <el-form-item label="所需人数" prop="requiredCount">
          <el-input-number v-model="taskEditForm.requiredCount" :min="1" />
        </el-form-item>
        <el-form-item label="任务描述" prop="description">
          <el-input
            v-model="taskEditForm.description"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="taskEditVisible = false">取消</el-button>
        <el-button type="primary" @click="updateTask">保存</el-button>
      </template>
    </el-dialog>
  </main>
</template>

<script>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  assignVolunteerTask,
  getVolunteerTasks,
  getTaskById,
  updateVolunteerTask,
  batchAssignTasks,
  getAvailableVolunteers,
  getVolunteerWorkload,
  getVolunteerProfile,
  getVolunteerStatistics
} from '@/api/volunteer'

export default {
  name: 'VolunteerTaskAssignment',
  setup() {
    // 当前用户信息
    const currentUser = ref(null)

    // 统计信息
    const statistics = reactive({
      totalVolunteers: 0,
      activeTasks: 0,
      pendingTasks: 0,
      completedTasks: 0
    })

    // 响应式数据
    const taskFormRef = ref(null)
    const taskEditFormRef = ref(null)
    const volunteerTableRef = ref(null)
    const loading = ref(false)

    // 搜索表单
    const searchForm = reactive({
      keyword: '',
      skillFilter: '',
      workloadFilter: ''
    })

    // 任务表单
    const taskForm = reactive({
      taskName: '',
      taskType: '',
      priority: 'medium',
      startTime: '',
      endTime: '',
      location: '',
      requiredCount: 1,
      requiredSkills: [],
      description: ''
    })

    // 任务表单验证规则
    const taskFormRules = {
      taskName: [
        { required: true, message: '请输入任务名称', trigger: 'blur' }
      ],
      taskType: [
        { required: true, message: '请选择任务类型', trigger: 'change' }
      ],
      priority: [
        { required: true, message: '请选择优先级', trigger: 'change' }
      ],
      startTime: [
        { required: true, message: '请选择开始时间', trigger: 'change' }
      ],
      endTime: [
        { required: true, message: '请选择结束时间', trigger: 'change' }
      ],
      location: [
        { required: true, message: '请输入工作地点', trigger: 'blur' }
      ],
      requiredCount: [
        { required: true, message: '请输入所需人数', trigger: 'blur' }
      ]
    }

    // 任务编辑表单
    const taskEditForm = reactive({
      id: '',
      taskName: '',
      taskType: '',
      priority: 'medium',
      startTime: '',
      endTime: '',
      location: '',
      requiredCount: 1,
      description: ''
    })

    // 分页数据
    const pagination = reactive({
      currentPage: 1,
      pageSize: 20,
      total: 0
    })

    const taskPagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 0
    })

    // 列表数据
    const availableVolunteers = ref([])
    const taskList = ref([])
    const selectedVolunteers = ref([])
    const recommendedVolunteers = ref([])
    const timeConflicts = ref([])

    // 视图控制
    const viewMode = ref('list')
    const smartRecommendEnabled = ref(true)
    const creatingTask = ref(false)
    const volunteerDetailVisible = ref(false)
    const taskDetailVisible = ref(false)
    const taskEditVisible = ref(false)
    const showBatchAssignDialog = ref(false)

    // 详情数据
    const selectedVolunteerDetail = ref(null)
    const selectedTaskDetail = ref(null)

    // 批量分配
    const batchAssignForm = reactive({
      taskId: '',
      selectedVolunteers: []
    })

    // 任务筛选
    const taskFilter = reactive({
      status: '',
      priority: ''
    })

    // 选项数据
    const skillOptions = ref([
      { label: '医疗急救', value: 'medical' },
      { label: '安保', value: 'security' },
      { label: '引导服务', value: 'guidance' },
      { label: '宣传报道', value: 'media' },
      { label: '后勤保障', value: 'logistics' },
      { label: '场地管理', value: 'venue' },
      { label: '设备技术', value: 'technical' },
      { label: '翻译服务', value: 'translation' }
    ])

    const taskTypeOptions = ref([
      { label: '场地布置', value: 'venue_setup' },
      { label: '赛事服务', value: 'event_service' },
      { label: '安保维护', value: 'security' },
      { label: '医疗保障', value: 'medical' },
      { label: '后勤支持', value: 'logistics' },
      { label: '宣传报道', value: 'media' },
      { label: '技术支持', value: 'technical' },
      { label: '引导服务', value: 'guidance' }
    ])

    // 计算属性
    const pendingTasks = computed(() => {
      return taskList.value.filter(task => task.status === 'pending')
    })

    const transferVolunteers = computed(() => {
      return availableVolunteers.value.map(volunteer => ({
        ...volunteer,
        disabled: volunteer.workloadPercentage > 80
      }))
    })

    // 方法定义
    const loadAvailableVolunteers = async () => {
      try {
        const params = {
          page: pagination.currentPage,
          pageSize: pagination.pageSize,
          keyword: searchForm.keyword,
          skill: searchForm.skillFilter,
          workload: searchForm.workloadFilter
        }
        const response = await getAvailableVolunteers(params)
        availableVolunteers.value = response.data.records || []
        pagination.total = response.data.total || 0

        // 如果启用智能推荐，获取推荐志愿者
        if (smartRecommendEnabled.value && taskForm.taskName) {
          getRecommendedVolunteers()
        }
      } catch (error) {
        ElMessage.error('获取志愿者列表失败')
        console.error('Load volunteers error:', error)
      }
    }

    const loadTaskList = async () => {
      try {
        const params = {
          page: taskPagination.currentPage,
          pageSize: taskPagination.pageSize,
          status: taskFilter.status,
          priority: taskFilter.priority
        }
        const response = await getVolunteerTasks(params.page, params.pageSize, params)
        taskList.value = response.data.records || []
        taskPagination.total = response.data.total || 0
      } catch (error) {
        ElMessage.error('获取任务列表失败')
        console.error('Load tasks error:', error)
      }
    }

    const createTask = async () => {
      if (!taskFormRef.value) return

      try {
        await taskFormRef.value.validate()
        creatingTask.value = true

        // 检查时间冲突
        await checkTimeConflicts()

        const response = await assignVolunteerTask(taskForm)
        ElMessage.success('任务创建成功')
        resetTaskForm()
        loadTaskList()

        // 如果有选中的志愿者，自动分配
        if (selectedVolunteers.value.length > 0) {
          await autoAssignVolunteers(response.data.id)
        }
      } catch (error) {
        if (error.message) {
          ElMessage.error(error.message)
        } else {
          ElMessage.error('任务创建失败')
        }
        console.error('Create task error:', error)
      } finally {
        creatingTask.value = false
      }
    }

    const resetTaskForm = () => {
      if (taskFormRef.value) {
        taskFormRef.value.resetFields()
      }
      Object.assign(taskForm, {
        taskName: '',
        taskType: '',
        priority: 'medium',
        startTime: '',
        endTime: '',
        location: '',
        requiredCount: 1,
        requiredSkills: [],
        description: ''
      })
    }

    const getRecommendedVolunteers = async () => {
      try {
        // 模拟智能推荐逻辑
        const recommendations = availableVolunteers.value
          .filter(volunteer => {
            // 基于技能匹配
            const skillMatch = taskForm.requiredSkills.length === 0 ||
              taskForm.requiredSkills.some(skill => volunteer.skills.includes(skill))

            // 基于工作负载
            const workloadMatch = volunteer.workloadPercentage < 70

            return skillMatch && workloadMatch
          })
          .map(volunteer => ({
            ...volunteer,
            matchScore: calculateMatchScore(volunteer)
          }))
          .sort((a, b) => b.matchScore - a.matchScore)
          .slice(0, 5)

        recommendedVolunteers.value = recommendations
      } catch (error) {
        console.error('Get recommendations error:', error)
      }
    }

    const calculateMatchScore = (volunteer) => {
      let score = 50 // 基础分数

      // 技能匹配分数
      if (taskForm.requiredSkills.length > 0) {
        const matchedSkills = taskForm.requiredSkills.filter(skill =>
          volunteer.skills.includes(skill)
        )
        score += (matchedSkills.length / taskForm.requiredSkills.length) * 30
      }

      // 工作负载分数
      score += (100 - volunteer.workloadPercentage) * 0.2

      return Math.round(score)
    }

    const checkTimeConflicts = async () => {
      if (!taskForm.startTime || !taskForm.endTime) return

      // 检查选中的志愿者是否有时间冲突
      const conflicts = []
      for (const volunteer of selectedVolunteers.value) {
        try {
          const workload = await getVolunteerWorkload(volunteer.id, {
            startTime: taskForm.startTime,
            endTime: taskForm.endTime
          })

          if (workload.data.conflicts && workload.data.conflicts.length > 0) {
            conflicts.push({
              volunteerId: volunteer.id,
              volunteerName: volunteer.name,
              conflicts: workload.data.conflicts
            })
          }
        } catch (error) {
          console.error('Check conflicts error:', error)
        }
      }

      timeConflicts.value = conflicts

      if (conflicts.length > 0) {
        throw new Error(`检测到 ${conflicts.length} 个时间冲突，请调整任务时间或选择其他志愿者`)
      }
    }

    const autoAssignVolunteers = async (taskId) => {
      try {
        const assignData = {
          taskId: taskId,
          volunteerIds: selectedVolunteers.value.map(v => v.id)
        }
        await batchAssignTasks(assignData)
        ElMessage.success('志愿者分配成功')
        selectedVolunteers.value = []
        loadAvailableVolunteers()
        loadTaskList()
      } catch (error) {
        ElMessage.error('志愿者分配失败')
        console.error('Auto assign error:', error)
      }
    }

    const assignTaskToVolunteer = async (volunteer) => {
      try {
        // 首先需要创建一个临时任务或选择现有任务
        if (!taskForm.taskName) {
          ElMessage.warning('请先创建任务或选择现有任务')
          return
        }

        const assignData = {
          ...taskForm,
          volunteerIds: [volunteer.id]
        }

        await assignVolunteerTask(assignData)
        ElMessage.success('任务分配成功')
        loadAvailableVolunteers()
        loadTaskList()
      } catch (error) {
        ElMessage.error('任务分配失败')
        console.error('Assign task error:', error)
      }
    }

    const editTask = async (task) => {
      try {
        const response = await getTaskById(task.id)
        const taskData = response.data

        Object.assign(taskEditForm, {
          id: taskData.id,
          taskName: taskData.taskName,
          taskType: taskData.taskType,
          priority: taskData.priority,
          startTime: taskData.startTime,
          endTime: taskData.endTime,
          location: taskData.location,
          requiredCount: taskData.requiredCount,
          description: taskData.description
        })

        taskEditVisible.value = true
      } catch (error) {
        ElMessage.error('获取任务详情失败')
        console.error('Get task detail error:', error)
      }
    }

    const updateTask = async () => {
      if (!taskEditFormRef.value) return

      try {
        await taskEditFormRef.value.validate()
        await updateVolunteerTask(taskEditForm)
        ElMessage.success('任务更新成功')
        taskEditVisible.value = false
        loadTaskList()
      } catch (error) {
        ElMessage.error('任务更新失败')
        console.error('Update task error:', error)
      }
    }

    const deleteTask = async (taskId) => {
      try {
        await ElMessageBox.confirm('确定要删除这个任务吗？', '确认删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        // 调用API删除任务
        // 这里应该调用deleteTask API，但由于已移除导入，暂时模拟成功
        // 记录删除的任务ID用于日志追踪
        console.log('删除任务ID:', taskId) // 使用taskId避免未使用变量警告
        ElMessage.success('任务删除成功')
        loadTaskList()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('任务删除失败')
          console.error('Delete task error:', error)
        }
      }
    }

    const showVolunteerDetail = async (volunteer) => {
      try {
        const response = await getVolunteerProfile(volunteer.id)
        selectedVolunteerDetail.value = response.data
        volunteerDetailVisible.value = true
      } catch (error) {
        ElMessage.error('获取志愿者详情失败')
        console.error('Get volunteer detail error:', error)
      }
    }

    const showTaskDetail = async (task) => {
      try {
        const response = await getTaskById(task.id)
        selectedTaskDetail.value = response.data
        taskDetailVisible.value = true
      } catch (error) {
        ElMessage.error('获取任务详情失败')
        console.error('Get task detail error:', error)
      }
    }

    const confirmBatchAssign = async () => {
      try {
        const assignData = {
          taskId: batchAssignForm.taskId,
          volunteerIds: batchAssignForm.selectedVolunteers
        }

        await batchAssignTasks(assignData)
        ElMessage.success('批量分配成功')
        showBatchAssignDialog.value = false
        batchAssignForm.taskId = ''
        batchAssignForm.selectedVolunteers = []
        loadTaskList()
        loadAvailableVolunteers()
      } catch (error) {
        ElMessage.error('批量分配失败')
        console.error('Batch assign error:', error)
      }
    }

    // 加载统计信息
    const loadStatistics = async () => {
      try {
        const response = await getVolunteerStatistics()
        if (response.code === 200) {
          Object.assign(statistics, {
            totalVolunteers: response.data.totalVolunteers || 0,
            activeTasks: response.data.activeTasks || 0,
            pendingTasks: response.data.pendingTasks || 0,
            completedTasks: response.data.completedTasks || 0
          })
        }
      } catch (error) {
        console.error('获取统计信息失败:', error)
      }
    }

    // 退出登录
    const handleLogout = () => {
      ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除用户信息
        localStorage.removeItem('user')
        localStorage.removeItem('token')
        // 跳转到登录页
        window.location.href = '/login'
      })
    }

    // 事件处理方法
    const handleSearch = () => {
      pagination.currentPage = 1
      loadAvailableVolunteers()
    }

    const handleReset = () => {
      Object.assign(searchForm, {
        keyword: '',
        skillFilter: '',
        workloadFilter: ''
      })
      handleSearch()
    }

    const handleSkillFilter = () => {
      pagination.currentPage = 1
      loadAvailableVolunteers()
    }

    const handleWorkloadFilter = () => {
      pagination.currentPage = 1
      loadAvailableVolunteers()
    }

    const handleVolunteerSelection = (selection) => {
      selectedVolunteers.value = selection
    }

    const handleRecommendationSelection = (selection) => {
      // 将推荐的志愿者添加到选中列表
      selectedVolunteers.value = [...selectedVolunteers.value, ...selection]
    }

    const toggleVolunteerSelection = (volunteer) => {
      const index = selectedVolunteers.value.findIndex(v => v.id === volunteer.id)
      if (index === -1) {
        selectedVolunteers.value.push(volunteer)
      } else {
        selectedVolunteers.value.splice(index, 1)
      }
    }

    const handleVolunteerClick = (row) => {
      volunteerTableRef.value.toggleRowSelection(row)
    }

    const handlePageSizeChange = (size) => {
      pagination.pageSize = size
      loadAvailableVolunteers()
    }

    const handleCurrentPageChange = (page) => {
      pagination.currentPage = page
      loadAvailableVolunteers()
    }

    const handleTaskPageSizeChange = (size) => {
      taskPagination.pageSize = size
      loadTaskList()
    }

    const handleTaskCurrentPageChange = (page) => {
      taskPagination.currentPage = page
      loadTaskList()
    }

    const filterTasks = () => {
      taskPagination.currentPage = 1
      loadTaskList()
    }

    const refreshVolunteerList = () => {
      loadAvailableVolunteers()
    }

    const assignMoreVolunteers = (task) => {
      // 设置当前任务并打开志愿者选择
      Object.assign(taskForm, {
        taskName: task.taskName,
        taskType: task.taskType,
        priority: task.priority,
        startTime: task.startTime,
        endTime: task.endTime,
        location: task.location,
        requiredCount: task.requiredCount - task.assignedCount
      })

      // 滚动到志愿者列表区域
      document.querySelector('.volunteer-list-card').scrollIntoView({ behavior: 'smooth' })
    }

    // 拖拽相关方法
    const handleDragStart = (event, volunteer) => {
      event.dataTransfer.setData('volunteer', JSON.stringify(volunteer))
      event.dataTransfer.effectAllowed = 'copy'
    }

    const handleDragEnd = () => {
      // 拖拽结束处理
    }

    // 工具方法
    const canAssignTask = (volunteer) => {
      return volunteer.workloadPercentage < 90
    }

    const getMatchScoreType = (score) => {
      if (score >= 80) return 'success'
      if (score >= 60) return 'warning'
      return 'info'
    }

    const getWorkloadStatus = (percentage) => {
      if (percentage >= 90) return 'exception'
      if (percentage >= 70) return 'warning'
      return 'success'
    }

    const getPriorityType = (priority) => {
      const types = {
        high: 'danger',
        medium: 'warning',
        low: 'info'
      }
      return types[priority] || 'info'
    }

    const getPriorityText = (priority) => {
      const texts = {
        high: '高',
        medium: '中',
        low: '低'
      }
      return texts[priority] || priority
    }

    const getStatusType = (status) => {
      const types = {
        pending: 'warning',
        in_progress: 'primary',
        completed: 'success',
        cancelled: 'info'
      }
      return types[status] || 'info'
    }

    const getStatusText = (status) => {
      const texts = {
        pending: '待分配',
        in_progress: '进行中',
        completed: '已完成',
        cancelled: '已取消'
      }
      return texts[status] || status
    }

    // 生命周期
    onMounted(() => {
      // 获取当前用户信息
      currentUser.value = JSON.parse(localStorage.getItem('user')) || { realName: '管理员' }
      // 加载数据
      loadAvailableVolunteers()
      loadTaskList()
      loadStatistics()
    })

    return {
      // Refs
      taskFormRef,
      taskEditFormRef,
      volunteerTableRef,

      // Reactive data
      currentUser,
      statistics,
      loading,
      searchForm,
      taskForm,
      taskFormRules,
      taskEditForm,
      pagination,
      taskPagination,
      availableVolunteers,
      taskList,
      selectedVolunteers,
      recommendedVolunteers,
      timeConflicts,
      viewMode,
      smartRecommendEnabled,
      creatingTask,
      volunteerDetailVisible,
      taskDetailVisible,
      taskEditVisible,
      showBatchAssignDialog,
      selectedVolunteerDetail,
      selectedTaskDetail,
      batchAssignForm,
      taskFilter,

      // Options
      skillOptions,
      taskTypeOptions,

      // Computed
      pendingTasks,
      transferVolunteers,

      // Methods
      loadAvailableVolunteers,
      loadTaskList,
      loadStatistics,
      createTask,
      resetTaskForm,
      getRecommendedVolunteers,
      assignTaskToVolunteer,
      editTask,
      updateTask,
      deleteTask,
      showVolunteerDetail,
      showTaskDetail,
      confirmBatchAssign,
      handleSearch,
      handleReset,
      handleSkillFilter,
      handleWorkloadFilter,
      handleVolunteerSelection,
      handleRecommendationSelection,
      toggleVolunteerSelection,
      handleVolunteerClick,
      handlePageSizeChange,
      handleCurrentPageChange,
      handleTaskPageSizeChange,
      handleTaskCurrentPageChange,
      filterTasks,
      refreshVolunteerList,
      assignMoreVolunteers,
      handleDragStart,
      handleDragEnd,
      canAssignTask,
      getMatchScoreType,
      getWorkloadStatus,
      getPriorityType,
      getPriorityText,
      getStatusType,
      getStatusText,
      handleLogout
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
* {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  background-color: #f0f2f5;
  color: #1a1a1a;
  margin: 0;
}

/* 容器布局 */
.app-container {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
  background-color: #F5F7FA;
}

/* 顶部导航栏 */
.header {
  grid-column: 1 / -1;
  background-color: #2C5AA0;
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.logo {
  font-size: 18px;
  font-weight: bold;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-grow {
  flex-grow: 1;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.gap-6 {
  gap: 24px;
}

.gap-2 {
  gap: 8px;
}

/* 左侧导航栏 */
.sidebar {
  background-color: white;
  padding: 16px 0;
  border-right: 1px solid #e4e7ed;
}

.menu-item {
  padding: 12px 24px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s;
  cursor: pointer;
}

.menu-item.active,
.menu-item:hover {
  background-color: #e8eff9;
  color: #2C5AA0;
  border-right: 3px solid #2C5AA0;
}

.menu-item a {
  color: inherit;
  text-decoration: none;
  flex: 1;
}

/* 主内容区 */
.content {
  padding: 24px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 20px;
  overflow-y: auto;
}

/* 面包屑导航 */
.breadcrumb-container {
  background: white;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e4e7ed;
}

/* 统计卡片 */
.statistics-cards {
  margin-bottom: 0;
}

.stat-card {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.stat-icon.total-volunteers {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.stat-icon.active-tasks {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.stat-icon.pending-tasks {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.stat-icon.completed-tasks {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

/* 搜索栏 */
.search-bar {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #e4e7ed;
  margin-bottom: 0;
}

/* 主要内容区域 */
.main-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #e4e7ed;
}

.content-row {
  margin-bottom: 20px;
}

.content-row {
  margin-bottom: 20px;
}

.left-panel,
.right-panel {
  height: calc(100vh - 300px);
  overflow-y: auto;
}

.task-form-card,
.volunteer-list-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.conflict-alert {
  margin-bottom: 15px;
}

.volunteer-list-view {
  height: calc(100% - 60px);
  overflow-y: auto;
}

.volunteer-card-view {
  height: calc(100% - 60px);
  overflow-y: auto;
}

.volunteer-card-col {
  margin-bottom: 20px;
}

.volunteer-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.volunteer-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.volunteer-card.selected {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.volunteer-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.volunteer-info h4 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.volunteer-info p {
  margin: 5px 0 0 0;
  font-size: 12px;
  color: #909399;
}

.volunteer-card-body {
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}

.info-item .label {
  color: #909399;
}

.skills-container {
  margin-top: 10px;
}

.skill-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

.workload-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workload-text {
  font-size: 12px;
  color: #606266;
  min-width: 35px;
}

.time-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.recommendation-panel {
  margin-top: 20px;
  padding: 15px;
  background: #f0f9ff;
  border-radius: 4px;
  border: 1px solid #bfdbfe;
}

.recommendation-panel h4 {
  margin: 0 0 10px 0;
  color: #1e40af;
}

.task-list-section {
  margin-top: 20px;
}

.task-list-card {
  background: white;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .statistics-cards .el-col {
    margin-bottom: 16px;
  }

  .left-panel {
    margin-bottom: 20px;
  }

  .volunteer-card-col {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .app-container {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .volunteer-card-col {
    margin-bottom: 16px;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
  }

  .search-bar .el-form--inline .el-form-item {
    display: block;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .search-bar .el-select,
  .search-bar .el-input {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .content {
    padding: 12px;
  }

  .statistics-cards .el-col {
    margin-bottom: 12px;
  }

  .main-content {
    padding: 12px;
  }

  .search-bar {
    padding: 12px;
  }

  .volunteer-card-col {
    margin-bottom: 12px;
  }
}

/* 加载状态增强 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
}

.el-button.is-loading {
  position: relative;
}

.el-button.is-loading:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, 0.35);
}

/* 表格悬停效果增强 */
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f5f7fa;
  transition: background-color 0.25s ease;
}

/* 表单交互增强 */
.el-form-item.is-error .el-input__inner {
  border-color: #f56c6c;
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
  transition: all 0.3s;
}

.el-form-item.is-success .el-input__inner {
  border-color: #67c23a;
  box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.2);
  transition: all 0.3s;
}

/* 对话框动画增强 */
.el-dialog {
  transition: all 0.3s ease;
}

.el-dialog__wrapper {
  backdrop-filter: blur(3px);
}

/* 分页组件增强 */
.el-pagination {
  text-align: center;
  margin-top: 20px;
}

.el-pagination .el-pager li {
  border-radius: 4px;
  transition: all 0.3s;
}

.el-pagination .el-pager li:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 按钮交互增强 */
.el-button {
  transition: all 0.3s ease;
  border-radius: 6px;
  font-weight: 500;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.el-button:active {
  transform: translateY(0);
}

/* 搜索栏增强 */
.search-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 卡片增强 */
.el-card {
  transition: all 0.3s ease;
  border-radius: 8px;
}

.el-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 标签增强 */
.el-tag {
  transition: all 0.3s ease;
  border-radius: 4px;
}

.el-tag:hover {
  transform: scale(1.05);
}

/* 志愿者卡片样式 */
.volunteer-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.volunteer-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.volunteer-card.selected {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.volunteer-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.volunteer-info h4 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.volunteer-info p {
  margin: 5px 0 0 0;
  font-size: 12px;
  color: #909399;
}

.volunteer-card-body {
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}

.info-item .label {
  color: #909399;
}

.skills-container {
  margin-top: 10px;
}

.skill-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

.workload-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workload-text {
  font-size: 12px;
  color: #606266;
  min-width: 35px;
}

.time-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* 推荐面板样式 */
.recommendation-panel {
  margin-top: 20px;
  padding: 15px;
  background: #f0f9ff;
  border-radius: 4px;
  border: 1px solid #bfdbfe;
}

.recommendation-panel h4 {
  margin: 0 0 10px 0;
  color: #1e40af;
}

/* 冲突提示 */
.conflict-alert {
  margin-bottom: 15px;
}

/* 志愿者列表视图 */
.volunteer-list-view {
  height: calc(100% - 60px);
  overflow-y: auto;
}

.volunteer-card-view {
  height: calc(100% - 60px);
  overflow-y: auto;
}

/* 任务列表区域 */
.task-list-section {
  margin-top: 20px;
}

.task-list-card {
  background: white;
}

/* 分页样式 */
.pagination {
  margin-top: 20px;
  text-align: center;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 拖拽样式 */
.volunteer-card.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.volunteer-card {
  animation: fadeIn 0.5s ease-out;
}

/* 加载状态 */
.creating {
  pointer-events: none;
  opacity: 0.7;
}

/* 头像和退出登录 */
#img-head {
  height: 40px;
  width: 40px;
  border-radius: 50px;
}

.denglu {
  color: white;
  font-size: 15px;
  text-decoration: none;
}

.denglu:hover {
  color: #F44346;
}

.text-sm {
  font-size: 14px;
}

.text-white {
  color: white;
}

/* 拖拽样式 */
.volunteer-card.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.volunteer-card {
  animation: fadeIn 0.5s ease-out;
}

/* 加载状态 */
.creating {
  pointer-events: none;
  opacity: 0.7;
}
</style>